<template>
	<view id="main">
		<safe-hight-box background="#FBC241"></safe-hight-box>
		<view class="top flex-between" style="justify-content: flex-end;" @click="goTo('/pages/message/index')">
			<van-icon name="comment-o" />
		</view>
		<view style="height: 62upx;"><view style="width: 750upx;height: 324upx;background: #FBC241;border-radius: 0upx 0upx 40upx 40upx;"></view></view>
		<view class="info flex-between">
			<image src="https://alipic.lanhuapp.com/xd0cdfd74b-ef97-4ec2-9c91-ddd2bc15bf5e" mode="aspectFill"></image>
			<view class="info-text flex-column-around">
				<label style="font-size: 36upx;font-weight: bold;color: #FFFFFF;">天晴了</label>
				<label style="font-size: 28upx;font-weight: bold;color: #FFFFFF;">13589784564</label>
			</view>
			<view class="info-change" @click="goTo('/pages/userInfo/index')">
				<van-icon name="edit" />
				点击修改
			</view>
		</view>
		<view class="card flex-column-between">
			<label>账户余额（元）</label>
			<view class="flex-between" style="width:622upx;font-size: 40upx;font-weight: bold;color: #FF8658;">
				<label>123165.00</label>
				<button class="card-button buttonCenter" @click="showCharge=true">充值</button>
			</view>
		</view>
		<van-action-sheet :show="showCharge" title="充值" @cancel="showCharge=false" @click-overlay="showCharge=false" @close="showCharge=false" >
			<van-field type="number":value="chargeValue" @input="chargeValue=$event.detail.value" label="充值金额" />
			<view class="chargeSelect flex-around">
				<view class="chargeSelect-item" :style="chargeSelectItem==0?'border: 2upx solid #FFB758;':''" @click="chargeSelectItem=0">
					<image src="../../static/weixin.png" mode="aspectFit"></image>
					<label>微信支付</label>
				</view>
				<view class="chargeSelect-item" :style="chargeSelectItem==1?'border: 2upx solid #FFB758;':''" @click="chargeSelectItem=1">
					<image src="../../static/zhifubao.png" mode="aspectFit"></image>
					<label>微信支付</label>
				</view>
			</view>
			<button class="button">充值</button>
		</van-action-sheet>
		<view class="funtion flex-around">
			<view class="funtion-item flex-column-between" @click="goTo('/pages/myOrder/index?test=123')">
				<image src="../../static/order.png"></image>
				<label>我的订单</label>
			</view>
			<view class="funtion-item flex-column-between" @click="goTo('/pages/myReturn/index')">
				<image src="../../static/return.png"></image>
				<label>我的退货</label>
			</view>
			<view class="funtion-item flex-column-between" @click="goTo('/pages/myStar/index')">
				<image src="../../static/like.png"></image>
				<label>我的收藏</label>
			</view>
			<view class="funtion-item flex-column-between" @click="goTo('/pages/myGroup/index')">
				<image src="../../static/group.png"></image>
				<label>我的拼团</label>
			</view>
		</view>
		<view class="cells">
			<van-cell title="平台反馈" is-link url="/pages/feedback/index" />
			<van-cell title="联系平台" is-link url="/pages/login/index" />
			<van-cell title="修改支付密码" is-link @click="showChange=true" />
			<van-dialog use-slot title="修改支付密码" :show="showChange" show-cancel-button @cancel="showChange=false" @confirm="showChange=false" >
				<van-field :value="change.nowPassword" @input="change.nowPassword=$event.detail.value" label="当前支付密码"placeholder="请输入当前支付密码" />
				<van-field :value="change.newPassword" @input="change.newPassword=$event.detail.value" label="新支付密码"placeholder="请输入新支付密码" />
				<van-field :value="change.reNowPassword" @input="change.reNowPassword=$event.detail.value" label="重复支付密码"placeholder="请再次输入新支付密码" />
			</van-dialog>
			<van-cell title="分享下载" is-link url="/pages/share/index" />
			<van-cell title="收货地址" is-link url="/pages/addressManger/index" />
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				showCharge:false,
				chargeValue:0,
				chargeSelectItem:0,
				showChange:false,
				change:{
					nowPassword:'',
					newPassword:'',
					reNowPassword:''
				}
			}
		}
	}
</script>

<style>
	page{
		background-color: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	.top{
		height: 88upx;
		background: #FBC241;
		padding-right: 32upx;
	}
	.info{
		padding-left: 34upx;
		padding-right: 34upx;
		height: 120upx;
		image{
			height: 120upx;
			width: 120upx;
			border-radius: 50%;
		}
		.info-text{
			width: 384upx;
			height: 100%;
		}
		.info-change{
			width: 120upx;
			height: 100%;
			font-size: 24upx;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
	.card{
		width: 622upx;
		height: 154upx;
		padding: 32upx;
		background: #FFFFFF;
		border-radius: 10upx;
		margin: 0 auto;
		margin-top: 32upx;
		font-size: 32upx;
		font-weight: bold;
		color: #333333;
		.card-button{
			width: 136upx;
			height: 48upx;
			background: #FBC241;
			border: 2upx solid #FFB758;
			border-radius: 10upx;
			font-size: 24upx;
			font-weight: bold;
			color: #FFFFFF;
			margin: 0upx;
		}
	}
	.funtion{
		width: 686upx;
		height: 128upx;
		margin: 0 auto;
		margin-top: 20upx;
		padding-top: 24upx;
		padding-bottom: 24upx;
		background: #FFFFFF;
		border-radius: 10upx;
		.funtion-item{
			font-size: 24upx;
			font-weight: 500;
			line-height: 34upx;
			color: #666666;
			image{
				width: 92upx;
				height: 92upx;
			}
		}
	}
	.chargeSelect{
		margin-top: 60upx;
		margin-bottom: 60upx;
		.chargeSelect-item{
			width: 326upx;
			height: 104upx;
			background: #FFFFFF;
			border: 2upx solid #FFFFFF;
			border-radius: 20upx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28upx;
			font-weight: 400;
			color: #666666;
			image{
				width: 60upx;
				height: 60upx;
				margin-right: 10upx;
			}
		}
	}
	.cells{
		width: 686upx;
		margin: 0 auto;
		margin-top: 20upx;
	}
</style>
